---
title: 備考
icon: PencilLine
---

<MetaData
  lang="ja-JP"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-note',
      locale: '@univerjs/preset-sheets-note/locales/en-US',
      style: '@univerjs/preset-sheets-note/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/sheets-note',
      facade: '@univerjs/sheets-note/facade',
    }, {
      client: '@univerjs/sheets-note-ui',
      locale: '@univerjs/sheets-note-ui/locale/en-US',
      style: '@univerjs/sheets-note-ui/lib/index.css',
    }],
    server: 'No',
  }}
/>

備考機能は、スプレッドシートのセルにコメントを追加して追加情報を記録したり、コンテキストを提供したりすることを可能にします。さまざまなコメントスタイルと操作をサポートし、ユーザーがデータをよりよく理解し、共同作業できるようにします。

<PlaygroundFrame lang="ja-JP" slug="sheets/notes" clickToShow />

## プリセットモード

### インストール

```package-install
npm install @univerjs/preset-sheets-note
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note' // [!code ++]
import UniverPresetSheetsNoteEnUS from '@univerjs/preset-sheets-note/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-note/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsNoteEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsNotePreset(), // [!code ++]
  ],
})
```

{/* ### プリセットと設定 */}

## プラグインモード

### インストール

```package-install
npm install @univerjs/sheets-note @univerjs/sheets-note-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsNotePlugin } from '@univerjs/sheets-note' // [!code ++]
import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui' // [!code ++]
import SheetsNoteUIEnUS from '@univerjs/sheets-note-ui/locale/en-US' // [!code ++]

import '@univerjs/sheets-note-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-note/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsNoteUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsNotePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsNoteUIPlugin) // [!code ++]
```

{/* ### プラグインと設定 */}

## Facade API

完全な Facade API の型定義は [FacadeAPI](https://reference.univer.ai/en-US) を参照してください。

### 備考の取得

ワークシート内のすべての備考を取得するには、`FWorksheet.getNotes` を使用します。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

notes.forEach((item) => {
  const { row, col, note } = item
  console.log(`Cell ${fWorksheet.getRange(row, col).getA1Notation()} has note: ${note}`)
})
```

Using `FRange.getNote` to get the annotation of the top-left cell in the range.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:D10')
const note = fRange.getNote()
```

### 備考の追加または更新

範囲の左上のセルの備考を作成または更新するには、`FRange.createOrUpdateNote` を使用します。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1')
fRange.createOrUpdateNote({
  note: 'This is an annotation',
  width: 160,
  height: 100,
  show: true,
})
```

### 備考の削除

範囲の左上のセルの備考を削除するには、`FRange.deleteNote` を使用します。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

if (notes.length > 0) {
  // ワークシート内の最初の備考を削除する
  const { row, col } = notes[0]
  fWorksheet.getRange(row, col).deleteNote()
}

// セル C1 の備考を削除する
const fRange = fWorksheet.getRange('C1')
fRange.deleteNote()
```

### イベントリスナー

完全なイベント型定義は [Events](https://reference.univer.ai/en-US/classes/FEventName) を参照してください。

| Event Name | 説明 |
| ---------- | ---- |
| `SheetNoteAdd` | 備考を追加した後にトリガーされた |
| `SheetNoteDelete` | 備考を削除した後にトリガーされた |
| `SheetNoteUpdate` | 備考を更新した後にトリガーされた |
| `SheetNoteShow` | 備考が表示されたときにトリガーされた |
| `SheetNoteHide` | 備考が非表示になったときにトリガーされた |
| `BeforeSheetNoteAdd` | 備考を追加する前にトリガーされた |
| `BeforeSheetNoteDelete` | 備考を削除する前にトリガーされた |
| `BeforeSheetNoteUpdate` | 備考を更新する前にトリガーされた |
| `BeforeSheetNoteShow` | 備考を表示する前にトリガーされた |
| `BeforeSheetNoteHide` | 備考を非表示にする前にトリガーされた |

##### Event Listener Examples

```typescript
// 備考を追加した後にトリガーされる
const disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {
  const { workbook, worksheet, row, col, note } = params
})

// `disposable.dispose()` を使ってイベントリスナーを削除します
```

```typescript
// 備考を削除する前にトリガーされ、キャンセル可能です
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {
  const { workbook, worksheet, row, col, oldNote } = params

  // 備考の削除操作をキャンセルする
  params.cancel = true
})

// `disposable.dispose()` を使ってイベントリスナーを削除します
```
